<template>
  <div class="home">
    <!-- 头部 -->
    <myheader bgcolor="yellow" title="传智播客.黑马程序员Vue.js"></myheader>
    <!-- autoplay 时间间隔 indicator-color：小圆点颜色 -->
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in imgList" :key="item.img">
        <img :src="item.img" alt="" />
      </van-swipe-item>
    </van-swipe>
    <!-- 消息导航 -->
    <div class="navigationBlock">
      <ul>
        <li>
          <a href="#/NewsList">
            <img src="@/images/menu3.png" alt="" />
            <span>新闻资讯</span>
          </a>
        </li>
        <li>
          <a href="#/ImgList">
            <img src="@/images/menu4.png" alt="" />
            <span>图片分享</span>
          </a>
        </li>
        <li>
          <a href="#/GoodsList">
            <img src="@/images/menu5.png" alt="" />
            <span>商品展示</span>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="@/images/menu6.png" alt="" />
            <span>留言反馈</span>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="@/images/menu9.png" alt="" />
            <span>搜索资讯</span>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="@/images/menu10.png" alt="" />
            <span>联系我们</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { getlunboList } from "@/api/getlunbo.js";
import myheader from "@/components/Header";
export default {
  components: { myheader },
  data() {
    return {
      imgList: [],
    };
  },
  async mounted() {
    let res = await getlunboList();
    console.log(res);
    this.imgList = res.data.message;
  },
};
</script>

<style lang="less" scoped>
img {
  width: 100%;
}
.navigationBlock {
  // margin-top: 20px;
  ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    li {
      flex: 33%;
      display: flex;
      margin-top: 20px;
      height: 90px;
      justify-content: space-around;
      font-size: 14px;
      a {
        text-align: center;

        img {
          display: block;
          margin-bottom: 10px;
          width: 60px;
          height: 60px;
        }
      }
    }
  }
}
</style>